<template>
  <div class="first_echarts" id="visit1"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const plateformMes = ref();
const xAxis = ref<any>([]);
const seriesData = ref<any>([]);
const shopId = localStorage.getItem("ShopId");
const props = defineProps({
  userVisitMonthlyCount: Array,
  firstechartsHeight: String,
  firstechartsWidth: String,
});
onMounted(async () => {
  // followCountInfo关注人数
  // salesInfo销售额
  var chartDom = document.getElementById("visit1");

  chartDom!.style.width = props.firstechartsWidth;
  chartDom!.style.height = props.firstechartsHeight;
  console.log(
    "777777777777777777777777777777777777777777777",
    props.firstechartsWidth
  );
  console.log(
    "999999999999999999999999999999999999999999999999",
    props.firstechartsHeight
  );
  for (let i = 0; i < props.userVisitMonthlyCount.length; i++) {
    xAxis.value[i] = props.userVisitMonthlyCount[i].month;
    seriesData.value[i] = props.userVisitMonthlyCount[i].count;
  }
  xAxis.value = xAxis.value;
  seriesData.value = seriesData.value;
  console.log("数据数据", xAxis.value);

  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: "category",
      data: xAxis.value,
    },
    yAxis: {
      type: "value",
    },
    grid: {
      left: "3%",
      right: "3%",
      bottom: "4%",
      top: "6%",
      containLabel: true,
    },
    series: [
      {
        data: seriesData.value,
        type: "bar",
        showBackground: false,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2378f7" },
              { offset: 0.7, color: "#2378f7" },
              { offset: 1, color: "#83bff6" },
            ]),
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped></style>
